// CSS Main
@import "main.less";
//import "user_common.less";

// album 
.album {
	float:left;
	width:718px;
	.ages {
		width:100%;
		background:lighten(@grayLight,38%);
		border:1px solid lighten(@grayLight,30%);
		// begin tr
		tr {
			&.first{
				td {
					border-bottom:1px solid lighten(@grayLight,30%);
				}
			}
			td {
				padding:10px;
				text-align:center;
				vertical-align:middle;
				img {
					width:120px;
					height:120px;
					display:none;
				}
				a {
					display:block;
					width:120px;
					height:50px;
					font-size:@midFontSize;
					font-family:altFontFamily;
					&:hover {
						background:lighten(@gray,55%);
					}
					.title {
						font-weight:bold;
					}
					.number,.gray {
						font-size:@baseFontSize;
						color:@grayLight;
					}
					&.on {
						background:@orange;
						color:@white;
						.number,.gray {
							color:@white;
						}
					}
					&.do{
						display:block;
						color:@white;
						font-weight:bold;
						line-height:50px;
						background:@gray;

						.icon {
							float:left;							
							width:48px;
							height:48px;
						}
						&.upload .icon  {
							background:url("@{userIcons}") -380px 10px no-repeat;
						}	
						&.chooser .icon  {
							background:url("@{userIcons}") -445px 3px no-repeat;
						}						
						&.chooser {
							background:@greenLight;
						}
					}
					//enddo
				}
				// end a
			}
		}
		// end tr
		
		
	}
	//end ages
	
	.gallery {
		figure {
			margin-top:10px;
			overflow:hidden;
			width:718px;
			img {
				max-width:720px;
			}
			.icon {
				width:16px;
				height:16px;
				float:left;
				background:url("@{userIcons}") 0 0 no-repeat;
				&.edit {
					background-position:-132px -584px;
				}
				&.delete {
					background-position:-161px -584px;
				}
				&.browse {
					background-position:-233px -584px;
				}
				&.comment {
					background-position:-270px -584px;
				}
				&.favorite {
					background-position:-297px -584px;
				}
				&.photograph {
					background-position:-327px -584px;
				}
				&.submenu {
					float:right;
					width:16px;
					height:14px;
					background:url("@{userBg}") -38px -39px  no-repeat;
				}
			}
			
			.info {
				clear:both;
				width:100%;
				overflow:hidden;
				a{
					float:left;
					margin-right:10px;
					color:@gray;
					&:hover {
						color:@black;
					}
				}
			}
			
			.toolbar {
				float:right;
				width:170px;
				text-align:right;
				a {
					float:left;
					margin-right:10px;
					color:@grayLight;
					&:hover {
						color:@black;
					}
				}
			}
			//end toolbar
			.title {
				float:left;
				margin-top:10px;
				font-size:@largeFontSize;
				font-family:@altFontFamily;
			}
			
			.desc {
				display:block;
				overflow:hidden;
				clear:both;
				color:@grayLight;
			}
		}
		//end figure
	}
	// end gallery
}

.uploader {
	position:absolute; 
	z-index:1000;
	top:100px;
	left:100px;
	width:620px;
	overflow:hidden;
	background:@white;
	padding:10px;
	display:none;
	.sec_load {
		float:left;
		width:234px;
		.upload_pmt {
			padding:10px;
			background:@grayLighter;
			width:202px;
			dd {
				margin-left:2em;
			}
			input {
				margin-right:10px;
			}
		}
		.uploadifyQueueItem {
		}
	}
	.sec_preview {
		float:left;
		.sec {
			clear:both;
			width:380px;
			height:100px;
			overview:hidden;
			margin-bottom:10px;
			input,textarea {
				width:260px;
			}
			img {
				width:100px;
				height:100px;
				float:left;
				margin-right:10px;
				
			}
			label {
				.clearfix();
			}
		}
	}
}